<!DOCTYPE html>
<html>
	<head>
		<title>eval5</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<script type="text/javascript" src="../umd/eval5.min.js"></script>
		<link href="../common.css" rel="stylesheet" />
		<style type="text/css">
			.code {
				height: 200px;
			}
			.btn-run {
				display: none;
			}
			.example {
				padding: 1em;
				background-color: #eeeedd;
				border: 1px solid #ccc;
				max-width: 655px;
			}
			.example tr {
				vertical-align: top;
			}
			.example td,
			.example th {
				padding: 0.2em;
				border-width: 0;
				margin: 0;
			}
			.example td a {
				font-size: 0.8em;
				text-decoration: none;
			}
			.example table.contactsEditor > tbody > tr {
				border-bottom: 1px solid silver;
			}
			.example td input {
				width: 8em;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="github">
				<a target="_blank" href="https://github.com/bplok20010/eval5"
					><svg
						width="80"
						height="80"
						viewBox="0 0 250 250"
						style="fill: #007acc; color: rgb(255, 255, 255); position: absolute; top: 0px; border: 0px; right: 0px;"
					>
						<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
						<path
							d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
							fill="currentColor"
							class="octo-arm"
							style="transform-origin: 130px 106px;"
						></path>
						<path
							d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
							fill="currentColor"
							class="octo-body"
						></path></svg
				></a>
			</div>
			<div class="tools">
				<button onclick="startRun()" id="runBtn" class="btn-run">Run</button>
				<a class="repo-link" href="https://github.com/bplok20010/eval5">
					<img alt="eval5" src="../github.png" />
				</a>
				<span id="version" class="version"></span>
				<a style="margin-left: 8px;" href="../examples.html">Examples</a>
			</div>

			<textarea id="lib" readonly class="code-lib"></textarea>
			<textarea id="code" readonly class="code"> </textarea>

			<div class="results-container">
				<div class="results-label">Console:</div>
				<div id="results"></div>
			</div>
			<div id="example" class="example">
				<h2>Contacts</h2>
				<div id="contactsList">
					<table class="contactsEditor">
						<tr>
							<th>First name</th>
							<th>Last name</th>
							<th>Phone numbers</th>
						</tr>
						<tbody data-bind="foreach: contacts">
							<tr>
								<td>
									<input data-bind="value: firstName" />
									<div>
										<a href="#" data-bind="click: $root.removeContact"
											>Delete</a
										>
									</div>
								</td>
								<td><input data-bind="value: lastName" /></td>
								<td>
									<table>
										<tbody data-bind="foreach: phones">
											<tr>
												<td><input data-bind="value: type" /></td>
												<td><input data-bind="value: number" /></td>
												<td>
													<a href="#" data-bind="click: $root.removePhone"
														>Delete</a
													>
												</td>
											</tr>
										</tbody>
									</table>
									<a
										href="#"
										style="margin-left: 10px"
										data-bind="click: $root.addPhone"
										>Add number</a
									>
								</td>
							</tr>
						</tbody>
					</table>
				</div>

				<p>
					<button data-bind="click: addContact">Add a contact</button>
					<button data-bind="click: save, enable: contacts().length > 0">
						Save to JSON
					</button>
				</p>

				<textarea data-bind="value: lastSavedJson" rows="5" cols="60" disabled="disabled">
				</textarea>
			</div>
		</div>
		<script type="text/javascript" src="./knockout.js"></script>
	</body>
</html>
